<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>儿童身高预测器</title>
    <style>
        body {
            background-image: url("img/1.webp");
            background-size: 600px; /* 背景图片大小 */
            background-position: center; /* 背景图片位置 */
            margin: 0;
            padding: 0;
            display: flex; 
            align-items: center; 
            justify-content: center; 
            height: 100vh; 
            color: #333; /* 字体颜色 */
            background-image: url("img/5.webp");
            background-size: 550px; /* 背景图片大小 */
            background-position: center; /* 背景图片位置 */
        }

        .container {
            max-width: 500px;
            background: white; /* 容器背景色 */
            padding: 30px; /* 内边距 */
            border-radius: 10px; /* 圆角 */
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); /* 阴影效果 */
            text-align: center; /* 文本居中 */
        }

        h3 {
            color: #007bff; /* 标题颜色 */
            margin-bottom: 20px; /* 下边距 */
            font-size: 24px; /* 字体大小 */
        }

        input[type="text"],
        input[type="button"] {
            width: 100%;
            padding: 12px; /* 增加内边距 */
            margin: 10px 0;
            border: 2px solid #ccc; /* 边框颜色 */
            border-radius: 5px; /* 圆角 */
            transition: border-color 0.3s, box-shadow 0.3s; /* 边框颜色和阴影过渡 */
        }

        input[type="text"]:focus {
            border-color: #007bff; /* 聚焦时边框颜色 */
            outline: none; /* 移除默认的轮廓 */
            box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* 增加聚焦时阴影 */
        }

        input[type="button"] {
            background-color: #007bff; /* 按钮背景颜色 */
            color: white;
            border: none; /* 移除默认边框 */
            cursor: pointer;
            font-size: 16px; /* 按钮字体大小 */
            transition: background-color 0.3s, transform 0.2s; /* 背景颜色和变换过渡 */
        }

        input[type="button"]:hover {
            background-color: #0056b3; /* 悬停时改变背景颜色 */
            transform: scale(1.02); /* 增加悬停时的效果 */
        }

        #result {
            margin-top: 20px;
            font-size: 14px;
            color: #333;
            font-weight: bold; /* 加粗 */
            background-color: #e9ecef; /* 结果部分背景 */
            padding: 10px; /* 内边距 */
            border-radius: 5px; /* 圆角 */
        }

        a {
            text-decoration: none; /* 移除下划线 */
            color: #007bff; /* 链接颜色 */
            font-weight: bold; /* 加粗 */
        }

        a:hover {
            text-decoration: underline; /* 悬停时显示下划线 */
        }

        footer {
            margin-top: 20px; /* 上边距 */
            font-size: 0.9em; /* 较小字体 */
            color: #777; /* 较浅颜色 */
        }
    </style>
</head>

<body>
    <div class="container">
        <h3>儿童身高预测器</h3>
        父亲身高(CM)： 
        <input type="text" id="father_height" placeholder="请输入父亲身高"> <br>
        母亲身高(CM)： 
        <input type="text" id="mother_height" placeholder="请输入母亲身高"><br>
        儿童性别：
        <input type="radio" name="gender" value="male" checked>男
        <input type="radio" name="gender" value="female">女<br>
        <input type="button" value="开始计算" onclick="kaishijisuan()">
        <input type="button" value="重新计算" onclick="chongxinjisuan()"><br>
        测试结果：<span id="result"></span>
        <p><a href="ceshihe.html">点击返回首页</a></p>
        <footer>
            <p>© 2024 周露航</p>
        </footer>
    </div>

    <script>
        function kaishijisuan() {
            var father_height = parseFloat(document.getElementById("father_height").value);
            var mother_height = parseFloat(document.getElementById("mother_height").value);
            var gender = document.getElementsByName("gender");
            var result = 0;

            // 检查输入的身高是否在150到220厘米之间
            if (isNaN(father_height) || father_height < 150 || father_height > 220) {
                document.getElementById("result").innerHTML = "父亲身高必须在150到220厘米之间。";
                return;
            }
            if (isNaN(mother_height) || mother_height < 150 || mother_height > 220) {
                document.getElementById("result").innerHTML = "母亲身高必须在150到220厘米之间。";
                return;
            }

            // 计算儿童身高
            for (var i = 0; i < gender.length; i++) {
                if (gender[i].checked) {
                    if (gender[i].value == "male") {
                        result = (father_height + mother_height) / 2 * 1.08;
                    } else if (gender[i].value == "female") {
                        result = (father_height * 0.923 + mother_height) / 2;
                    }
                }
            }
            result = result.toFixed(1);
            document.getElementById("result").innerHTML = "您的儿童身高为：" + result + "厘米(CM)";
        }

        function chongxinjisuan() {
            document.getElementById("father_height").value = "";
            document.getElementById("mother_height").value = "";
            document.getElementById("result").innerHTML = "";
        }
    </script>
</body>
</html>
